<template>
  <div class="soushuo"> 
    <span>输入搜索</span>
    <el-input v-model="input" placeholder="输入用户昵称和手机号..."></el-input>
    <div class="block">
        <span class="demonstration">上次消费时间</span>
        <el-date-picker
        v-model="value1"
        type="date"
        placeholder="开始日期">
        </el-date-picker>
        <b>-</b>
        <el-date-picker
        v-model="value1"
        type="date"
        placeholder="结束日期">
        </el-date-picker>
    </div>
 
        <el-button type="primary" @click="souBut">查询</el-button>
     <el-button @click="souChong">重置</el-button>
   
  </div>
</template>

<script> 
export default {
  data() {
    return {
      input: '',
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          
        },

        value1: '',
        value2: '',
  }
},
methods:{
  souBut(){
    this.$emit('souParent',this.input)
  },
  souChong(){
    this.input=''
    this.$emit('souZhi')
  }
}

}
</script>

<style lang="less" scope>
.soushuo{
    height: 64px;
    background: #fff;
    line-height: 64px;
    padding-left: 30px;
    margin-bottom: 20px;
    .el-input{
        width: 170px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #333;
        padding-left:12px;
        display: inline-block;
       
       .el-input__inner{
           height: 32px;
       }
       
    }
    span{
         font-size: 16px;
         margin-right: 8px;
         font-weight: 600;
       }
       .block{
           display: inline-block;
           margin-left: 30px;
           .el-input__prefix{
           display: none;
       }
    //    b{
    //        margin-left: 8px;
    //    }
       .el-date-editor{
           width: 120px;
           padding: 8px;
       }
       }
       
       .el-button{
           height: 32px;
           line-height: 32px;
           margin-left: 20px;
           padding: 0 24px;
          
           
       }
       
}
</style>